<template>
  <div id="app">
    <div class="top">
         <Top  class="wrap" v-if="$route.path!='/login'"></Top>
    </div>
 
    <div class="content wrap">
      <div v-if="$route.path!='/login'" class="left">
        <Menu></Menu>
    </div>
    <div class="right"> 
      <router-view/>
    </div>
   

    </div>
    
  </div>
</template>

<script>
import Top from "./components/Top"
import Menu from "./components/Menu"
export default {
    components:{
      Top,
      Menu
    },
    mounted() {
      console.log(this.$route,"rrr")
    },
}
</script>
<style lang="scss">
$color:rgb(27, 41, 87);
  *{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
  }
  .wrap{
    width:90%;
    margin:0 auto;
  }
  #app {
    background: #140d55;
    .content{
      display: flex;
    }
    .left{
      width:300px;
      height:92vh;
      background: $color;
    }
    .right{
      flex:1;
        height:92vh;
        background: #fff;
        overflow-y: auto;
    }
    
  }
  
</style>

<style>
  .top{
    background :rgb(34, 50, 102);
  }
</style>
